<template>
  <view class="container">
    <!-- 显示当前选择的家教需求 -->
    <view class="course-title">{{ selectedCourse }} 家教需求详情</view>

    <!-- 家教需求详细信息 -->
    <view class="parent-detail">
      <image :src="parent.avatar" alt="家长头像" class="parent-avatar" />
      <view class="parent-info">
        <view class="parent-name">姓名: {{ parent.name }}</view>
        <view class="parent-background">需求学历: {{ parent.background }}</view>
        <view class="parent-sex">需求性别: {{ parent.sex }}</view>
        <view class="parent-city">所在城市: {{ parent.city }}</view>
        <view class="parent-phone">联系方式: {{ parent.phone_number }}</view>
        <view class="parent-duration">课程开始: {{ parent.duration_begin }} </view>
        <view class="parent-duration">课程结束: {{ parent.duration_end }} </view>
        <view class="parent-salary">提供薪资: {{ formatSalary(parent.salary) }}</view>
        <view class="parent-content">需求内容: {{ parent.content }}</view>
        <view class="parent-status">状态: {{ getStatusText(parent.status) }}</view>
        
        <!-- 接单按钮，不再根据状态码显示，始终显示接单按钮 -->
        <button class="accept-order-btn" @click="confirmAcceptOrder">
          接单
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      parent: {}, // 家长信息
      selectedCourse: '', // 当前选择的课程
    };
  },
  onLoad(options) {
    const { account, course } = options; // 获取家长账号和课程名称
    this.selectedCourse = course;
    this.loadParentDetail(account);
  },
  methods: {
    // 格式化薪资
    formatSalary(salary) {
      return `¥${parseFloat(salary).toFixed(2)} /小时`;
    },
    // 加载家长详细信息
    loadParentDetail(account) {
      this.$request.get(`/need/detail?account=${account}&course=${this.selectedCourse}`).then(res => {
        if (res.code === '200') {
          this.parent = res.data || {};
        } else {
          console.error('获取家长详情失败:', res.msg);
        }
      }).catch(error => {
        console.error('请求失败:', error);
      });
    },
    // 获取状态文本
    getStatusText(status) {
      return status === '0' ? '正在接单' : '已接单';
    },
    // 弹出确认接单窗口
    confirmAcceptOrder() {
      wx.showModal({
        title: '确认接单',
        content: '您确定要接这个订单吗？',
        success: (res) => {
          if (res.confirm) {
            this.acceptOrder();
          }
        }
      });
    },
    // 接单逻辑
    acceptOrder() {
      const storedTeacher = uni.getStorageSync('xm-user');
      this.$request.post('/order/create', { 
          user_account: this.parent.account, // 这里从 parent 中获取 account
          course: this.selectedCourse,
          teacher_account: storedTeacher.account, 
          content: this.parent.content,
          duration_begin: this.parent.duration_begin,
		  duration_end: this.parent.duration_end,
          salary: this.parent.salary,
          status: '0'
        })
        .then(res => {
          if (res.code === '200') {
			  uni.showToast({
			    icon: 'success',
			    title: '接单成功，等待确认'
			  });
            console.log("接单成功");
          } else {
			  uni.showToast({
			    icon: 'error',
			    title: '请勿重复接单'
			  });
            console.error('接单失败:', res.msg);
          }
        })
        .catch(error => {
          console.error('请求失败:', error);
        });
    }
  }
};
</script>

<style>
.container {
  padding: 40rpx;
  background-color: #eef2f7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.course-title {
  font-size: 50rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
  background-color: #fff;
  padding: 25rpx;
  border-radius: 25rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}

.parent-detail {
  display: flex;
  background-color: #fff;
  padding: 35rpx;
  border-radius: 25rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;
  width: 90%;
}

.parent-avatar {
  width: 220rpx;
  height: 220rpx;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 25rpx;
}

.parent-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.parent-name, .parent-background, .parent-sex, .parent-city, .parent-phone, 
.parent-duration, .parent-salary, .parent-content, .parent-status {
  font-size: 34rpx;
  margin-bottom: 12rpx;
}

.parent-salary {
  color: #e74c3c;
  font-weight: bold;
}

.parent-status {
  color: #27ae60;
  font-weight: bold;
}

.accept-order-btn {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
  padding: 15rpx 35rpx;
  font-size: 32rpx;
  border-radius: 50rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  border: none;
  margin-top: 20rpx;
  transition: transform 0.3s, box-shadow 0.3s;
}

.accept-order-btn:hover {
  background-color: #2980b9;
  transform: scale(1.05);
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.25);
}
</style>
